import type { ComponentType, FC } from "react"
import { lazy } from "react"
import { useSelector } from "react-redux"
import type { RouteObject } from "react-router"
import { Navigate } from "react-router"
import { useRoutes } from "react-router-dom"

import { FormatMessageProps, useLocale } from "@/locales"
// import Dashboard from "@/pages/dashboard";
import LayoutPage from "@/pages/layout"
import LoginPage from "@/pages/login"
import NotFinish from "@/pages/notFinish"
import { AppState } from "@/stores"
import { homePath } from "@/utils/const"

import WrapperRouteComponent from "./config"
// import { avilablePages } from "./temp"
import type { MenuData, MenuDataItem } from "./type"

const HomePage = lazy(() => import(/* webpackChunkName: "home'"*/ "@/pages/home"))
// const MenuPage = lazy(() => import("@/pages/system/authorityManage/menuManage"))
const NotFound = lazy(() => import(/* webpackChunkName: "404'"*/ "@/pages/404"))

const pages: Record<string, () => Promise<unknown>> = Object.assign(
	import.meta.glob("@/pages/*/*/index.tsx"),
	import.meta.glob("@/pages/*/*/*/index.tsx"),
	import.meta.glob("@/pages/*/*/*/*/index.tsx")
)
console.log(pages)

const routes = Object.entries(pages).reduce((prev, [comp, page]) => {
	const path = comp.replace(/\/src\/pages|\/index\.tsx/g, "")
	// if (avilablePages.find(item => item.component === path)) {
	const component = lazy(page as unknown as () => Promise<{ default: ComponentType<any> }>)
	prev.push({ path, component })
	// }
	return prev
}, [] as { path: string; component: React.LazyExoticComponent<ComponentType<any>> }[])

export const loadItemByRedirct = (item: MenuDataItem, newFormat: FormatMessageProps) => {
	const { component } = item
	const route = routes.find(i => i.path === component)
	document.title = `${newFormat({ id: "title.base" })}-${newFormat({ id: item.permissionName })}`
	console.log(route)
	return route ? route.component : NotFinish
}
const menuGenerator = (menu: MenuData, newFormat: FormatMessageProps, keepAlive: boolean): RouteObject[] => {
	return menu.map(item => {
		const { children, component } = item
		if (component) {
			// 如果是keepAlive，路由页面是个空的<div />, 页面将置于tabpane中
			const Temp = keepAlive ? "div" : loadItemByRedirct(item, newFormat)
			return {
				path: item.component,
				Component: Temp,
				name: item.permissionName
			}
		}
		return {
			path: "",
			children: menuGenerator(children || [], newFormat, keepAlive)
		}
	}) as RouteObject[]
}
const RenderRouter: FC<{ menuData: MenuData }> = props => {
	const { newFormat } = useLocale()
	const { menuData } = props
	const { keepAlive } = useSelector((state: AppState) => state.global)
	const menuByGenerator = menuGenerator(menuData, newFormat, keepAlive)
	!keepAlive &&
		menuByGenerator.unshift({
			path: "",
			element: <WrapperRouteComponent element={<NotFound />} titleId="title.notFound" />
		})
	const routeList: RouteObject[] = [
		{
			path: "/login",
			element: <WrapperRouteComponent element={<LoginPage />} titleId="title.login" />
		},
		// {
		// 	path: "/system/authorityManage/menuManage",
		// 	element: <WrapperRouteComponent element={<MenuPage />} titleId="title.menu" />
		// },
		{
			path: "/",
			element: <WrapperRouteComponent element={<LayoutPage />} titleId="" />,
			children: [
				{
					path: "",
					// element: <div>首页</div>
					element: <Navigate to={homePath} />
				},
				{
					path: homePath,
					element: <WrapperRouteComponent element={<HomePage />} titleId="title.home" />
					// Component: HomePage
				},
				...menuByGenerator,
				{
					path: "*",
					element: keepAlive ? <div></div> : <WrapperRouteComponent element={<NotFound />} titleId="title.notFound" />
				}
			]
		}
	]
	const element = useRoutes(routeList)

	return element
}

export default RenderRouter
